<template>
	<div class="list-page">
		<div class="filter">
			<div class="item">
				<span>地区：</span>
				<router-link :to="{ name: 'mv_list', params: { area: v.id }}" 
					v-for="(v,i) in mvNavData.area" 
					:key="i"
					:class="{active: v.id == $route.params.area}"
					@click.prevent="toCheckNav('area', v.id)"
					>{{ v.name }}</router-link>
			</div>
			<div class="item">
				<span>类型：</span>
				<router-link :to="{ name: 'mv_list', params: { tag: v.id }}" 
					v-for="(v,i) in mvNavData.version" 
					:key="i"
					:class="{active: v.id == $route.params.tag}"
					@click.prevent="toCheckNav('tag', v.id)"
					>{{ v.name }}</router-link>
			</div>
		</div>
		<ul class="mv-list">
			<li v-for="item in mvListData" @click="toPlayVideo(item)">
				<div class="img">
					<img :src="item.pic">
					<em></em>
					<p class="info">
						<span class="play">{{ item.playCount | numTofixed }} 万</span>
						<span class="fr">{{ item.publictime }}</span>
					</p>
				</div>
				<p class="user">
					<span class="name">{{ item.name }}</span>
					<span class="singer">{{ item.singer }}</span>
				</p>
			</li>
		</ul>
		<transition name="fade">
			<div class="video-play" v-show="isPlayVideo" v-html="videoSrc" @click="videoSrc='', isPlayVideo=false">
			</div>
		</transition>
		<div class="loading-mask" id="loading-mask" v-show="loading"><div class="loader"><svg viewBox="25 25 50 50" class="circular"><circle cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" class="path"></circle></svg></div></div>
	</div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  	name: 'MVList',
  	data() {
  		return {
  			mvNavData: [],
  			mvListData: [],
  			loading: false,
  			videoSrc: '',
  			isPlayVideo: false,
  		}
  	},
  	watch: {
    	'$route': 'getMVlistData'
  	},
  	methods: {
  		getMVlistData() {
  			this.loading = true;
  			this.$store.dispatch('getMVList', {
  				year: this.$route.params.year, 
  				tag: this.$route.params.tag, 
  				area: this.$route.params.area
  			}).then((res) => {
        		this.mvListData = res.data.data
        		this.loading = false;
      		})
  		},
  		toPlayVideo(data) {
  			this.videoSrc = `<video controls name="media" width="100%" autoplay src="${ data.url }" style="background-color: #000"></video>`;
  			this.isPlayVideo = true;
  		}
  	},
  	created() {
  		this.$store.dispatch('getMVClassify').then((res) => {
        		this.mvNavData = res.data.data
      		});
  		this.getMVlistData()
  	},
  	filters: {
	  	numTofixed(num) {
	  		return (num/10000).toFixed(1)
	  	}
	},
}
</script>

<style lang="stylus" scoped>
@import './../assets/stylus/loading.styl';

.fade-enter-active, .fade-leave-active
	transition opacity .5s
.fade-enter, .fade-leave-to
	opacity 0
	
.list-page
	padding-bottom 70px
	.filter 
		margin-top 10px
		padding 0 10px
		.item 
			margin-bottom 10px
			font-size 14px
			* 
				display inline-block
				line-height 1.6
			span 
				color #999
			a 
				padding 0 6px
				color #666
				text-decoration none
				font-size 15px
				&.active 
					color #3385ff
	.mv-list
		margin 0 10px
		li 
			width 100%					
			margin-top 15px
			.img 
				width 100%
				position relative
				img 
					width 100%
				p 
					position absolute
					line-height 30px 
					color #fff 
					bottom 0px
					width 100%
					left 0px
					padding 0 10px
					font-size 12px
				em 
					position absolute
					width 40px 
					height 40px 
					background-color rgba(0,0,0,.5)
					border-radius 50%
					top 50%
					left 50%
					transform translate(-50%, -50%)
					cursor pointer
					&::after 
						content ""
						position absolute
						left 56%
						top 50%
						transform translate(-50%, -50%)
						width 0
						height 0
						border-left 16px solid #fff 
						border-top 12px solid transparent
						border-bottom 12px solid transparent	
			.fr 
				float right		
			.user 
				margin-top 5px
				line-height 1.4
				font-size 14px
				.name 
					display block
				.singer 
					color #666
					font-size 12px
	.video-play
		position fixed 
		z-index 99
		width 100%
		height 100%
		left 0px
		top 0px
		background-color rgba(0,0,0,.6)
		text-align center
</style>